<template>
	<view>
		 <uni-segmented-control :current="current" :values="items" 
			@clickItem="onClickItem" styleType="text" activeColor="#b9cfff"></uni-segmented-control>
		<view style="display: flex;">
			 <view style="flex: 1;text-align: right;" >
			<picker mode="date" :value="date"  @change="bindDateChange" style="position: relative;" >
				<view >{{date}}<uni-icons type="down" size="12"></uni-icons></view>
			</picker>
		 </view>
		</view>
		 <view style="padding: 20rpx;">
			<view v-if="current === index" v-for="(tab, index) in 4" :key="index">
				<view class="box" v-for="item in ordersList" :key="item.id" style="margin-bottom: 10rpx;">
					<view style="display: flex; align-items: baseline; margin-bottom: 10rpx;">
						<!-- 导航跳转到店铺 -->
						<navigator :url="'/pages/detail/detail?businessId=' + item.businessId"
							style="flex: 1; font-size: 32rpx; ">{{ item.businessName }}  
							<uni-icons type="right" size="16" color="#666" style="position: relative; top: 2rpx;"></uni-icons>
						</navigator>
						<view style="font-size: 24rpx; color: #666;">{{ item.status }}</view>
				</view>
					<view style="flex: 1;">物品：{{ item.name }}</view>
					<view style="flex: 1;">收件人：{{ item.user }}</view>
					<view style="flex: 1;">电话：{{ item.phone }}</view>
					<view style="flex: 1;">商家地址：{{ item.businessAddress }}</view>
					<view style="flex: 1;">收货地址：{{ item.address }}</view>
					<view style="display: flex; min-height: 40rpx;">
						<view style="flex: 1;">
							<view v-if="item.status === '已取消' || item.status === '待评价' || item.status === '已退款' || item.status === '待收货'" @click="del(item.id)">
								<uni-icons type="trash" size="16" color="#666" style="position: relative; top: 2rpx;"></uni-icons>
								<text style="font-size: 24rpx; color: #666;">删除</text>
							</view>
						 </view>
						 <view style="flex: 1; text-align: right;">
							  <uni-tag v-if="item.status === '待骑手接单'" text="接单" size="mini" type="primary" @click="changeStatus(item, '运输中')"></uni-tag>
							  <uni-tag v-if="item.status === '运输中'"text="送达" size="mini" type="warning" @click="changeStatus(item, '待收货')"></uni-tag>
						 </view>
					</view>
				</view>
			</view>
		</view>	
		<uni-fab ref="fab" :pattern="pattern" :horizontal="horizontal" :vertical="vertical"
					:direction="direction" @fabClick = "fabClick()"/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				items: ['全部', '待接单','运输中', '已完成'],
				ordersList: [],
				user: uni.getStorageSync('xm-user'),
				horizontal: 'left',
				vertical: 'bottom',
				direction: 'horizontal',
				status : 0,
				pattern: {
					color: '#7A7E83',
					selectedColor: '#b9cfff',
					buttonColor: '',
					iconColor: '#fff',
					icon:''
				},
				date:"请选择日期",
			}
		},
		onShow() {
			this.loadOrders()
			this.$request.get('/delivery/selectAll',{ deliveryId:this.user.id }).then(res =>{
				// 骑手数据
				this.status = res.data[0].status
				this.pattern.buttonColor = this.status == 1 ? '#00aa00' : '#ff0000'
				this.pattern.icon = this.status== 1 ? 'checkbox' : 'close'
			})
		},
		methods: {
			del(orderId) {
				this.$request.del('/orders/delete/' + orderId).then(res => {
					if (res.code === '200') {
					  uni.showToast({
					    icon: "success",
					    title: '操作成功'
					  })
					  this.loadOrders()
					} else {
					  uni.showToast({
					    icon: "error",
					    title: res.msg
					  })
					}
				})
			},
			changeStatus(orders, status) {
				let form = JSON.parse(JSON.stringify(orders))
				form.status = status
				this.$request.put('/orders/update', form).then(res => {
					if (res.code === '200') {
					  uni.showToast({
					    icon: "success",
					    title: '操作成功'
					  })
					  this.loadOrders()
					} else {
					  uni.showToast({
					    icon: "error",
					    title: res.msg
					  })
					}
				})
			},
			loadOrders() {
				let status = '全部'
				switch(this.current) {
					case 0: status = '全部'; break
					case 1: status = '待接单'; break
					case 2: status = '运输中'; break
					case 3: status = '已完成'; break
				}
				let time = this.date === "请选择日期"?"":this.date
				console.log(time)
				this.$request.get('/orders/selectAll', { deliveryId:  this.user.id, status: status , time:time }).then(res => {
					this.ordersList = res.data || []
				})
			},
			onClickItem(e) {
				  if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
					this.loadOrders()
				  }
			},
			fabClick(){
				this.status = this.status === 1 ? 0 : 1
				this.$request.put('/delivery/update',{id:this.user.id,status:this.status}).then(res=>{
					if (res.code === '200') {
						if(this.status === 1){
							uni.showToast({
							icon: "success",
							title: '开始接单'
							})
						}else{
							uni.showToast({
							icon: "success",
							title: '结束接单'
							})
						}
					  this.loadOrders()
					} else {
					  uni.showToast({
					    icon: "error",
					    title: res.msg
					  })
					}
				})
				this.pattern.buttonColor = this.status=== 1 ? '#00aa00' : '#ff0000'
				this.pattern.icon = this.status=== 1 ? 'checkbox' : 'close'
				console.log(this.status)
			},
			
			bindDateChange(e){
				this.date = e.detail.value;
				this.loadOrders();
			}
		}
	}
</script>

<style>
.uni-fab__content--other-platform{
	box-shadow: 0 0 black !important;
}
</style>